<template>
  <div class="docker">
    <span class="docker-item" :class="{' docker-item-active':index===0}" v-for="(item,index) in dockerList" :key="item.icon">
      <div class="iconfont" v-html="item.icon"></div>
      <div class="docker-title">{{item.text}}</div>
    </span>
  </div>
</template>

<script>
export default {
    name:"Docker",
    setup(){
      const dockerList=[
        {icon:'&#xe6f3;',text:'首页'},
        {icon:'&#xe7e5;',text:'购物车'},
        {icon:'&#xe61e;',text:'订单'},
        {icon:'&#xe660;',text:'我的'},
      ];
      return {dockerList}
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/viriables.scss";
@import "../../assets/style/mixins.scss";
.docker {
  position: absolute;
  box-sizing: border-box;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 1px solid #f1f1f1;
  display: flex;
  color: #333;
  &-item {
    flex: 1;
    text-align: center;
    .iconfont {
      font-size: 0.18rem;
      margin: 0.07rem 0 0.02rem 0;
    }
    &-active {
      color: #1fa4fc;
    }
  }
  &-title {
    font-size: 20px;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>